<template>
  <div>
    <babyTab :active.sync="activeTab" :tabs="tabs"></babyTab>
    <normalNurse
      v-show="activeTab === 0"
      :id="id"
      ref="normalNurse"
      :child="child"
      @jumpNext="jumpNext"
    ></normalNurse>
    <specialNurse
      v-show="activeTab === 1"
      :id="id"
      ref="specialNurse"
    ></specialNurse>
    <!-- <el-row v-show="showSubmit" style="background:#fff;padding:0 10px">
      <div class="column">
        <div class="title">备注</div>
        <el-input
          v-model="remark"
          style="width:80%"
          type="textarea"
          autosize
          placeholder="此处可输入宝宝的其他备注信息"
        >
        </el-input>
      </div>
    </el-row> -->
    <div v-show="showSubmit" class="btn-box">
      <div class="submit-btn" @click="submit">提交</div>
    </div>
  </div>
</template>
<script>
import babyTab from '@/components/common/babyTab/babyTab';
import normalNurse from './normalNurse';
import specialNurse from './specialNurse';
import toast from '@/toast';

export default {
  components: {
    babyTab,
    normalNurse,
    specialNurse
  },
  props: {
    id: {},
    child: [Object]
  },
  data() {
    return {
      activeTab: 0,
      tabs: [{label: '常见病调理', value: 0}, {label: '特色调理', value: 1}],
      remark: '',
      showSubmit: true
    };
  },
  watch: {
    activeTab(v) {
      if (v === 1) {
        this.showSubmit = !!this.$refs.specialNurse.customList.length;
      } else {
        this.showSubmit = true;
      }
    }
  },
  methods: {
    submit() {
      const params = {
        u_id: this.id
      };
      if (this.activeTab === 0) {
        const chooseRes = this.$refs.normalNurse.getResult();
        if (chooseRes.error) {
          toast(chooseRes.error);
          return;
        }
        this.$http
          .post(
            this.$url.postDiseaseConfirmed,
            Object.assign(params, chooseRes)
          )
          .then(res => {
            if (res.status === 2) {
              this.$emit('next', {record_id: res.record_id}, 2, 'normal');
            }
            if (res.status === 1) {
              this.$emit('detailNext', {
                disease_id: res.data.disease_id,
                temperature: res.data.tem_return
              });
            }
          })
          .catch(this.$catch);
        return;
      }
      if (this.activeTab === 1) {
        // params.symptom_remark = this.remark;
        params.commodity_id = this.$refs.specialNurse.commodity_id;
        if (!params.commodity_id) {
          this.$message.error('请至少选择一项');
          return;
        }
        this.$http
          .post(this.$url.postCustomList, params)
          .then(res => {
            this.$message.success('操作成功');
            this.$emit('next', {record_id: res.record_id}, 2, 'characteristic');
          })
          .catch(this.$catch);
      }
    },
    jumpNext(disease_id) {
      this.$emit('detailNext', {
        disease_id
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-box {
  background-color: #fff;
  display: flex;
  justify-content: center;
  height: 140px;
  padding-top: 30px;
  .submit-btn {
    line-height: 40px;
    text-align: center;
    width: 230px;
    height: 40px;
    border-radius: 20px;
    background-color: #ffb03e;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    &.active {
      opacity: 0.5;
    }
  }
}
.column {
  background-color: #f2f6ff;
  display: flex;
  align-items: center;
  min-height: 50px;
  margin-bottom: 8px;
  font-size: 16px;
  .title {
    position: relative;
    width: 167px;
    box-sizing: border-box;
    color: #4b90ff;
    padding-left: 10px;
    .require {
      position: absolute;
      left: 2px;
      top: -4px;
      color: #dd331d;
    }
    .big-tip {
      color: #fff;
      background-color: red;
      padding: 5px 20px;
      border-radius: 5px;
      margin-left: 5px;
    }
  }
}
</style>
